<template>
	<view class="product-or-customer">
		<view class="item" v-for="(item,index) in data" :key="index" @click="onItem(item)">
			<view class="item-title" :class="acticeIndex == item.id ? 'actice' : ''">
				{{item.title}}
			</view>
			<view :class="acticeIndex == item.id ? 'actice-solid' : ''"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:[
					{
						title:"选产品",
						id:1
					},
					{
						title:"选客户",
						id:2
					}
				],
				acticeIndex:1,
			};
		},
		created() {
			
		},
		methods:{
			onItem(item)
			{
				if(this.acticeIndex == item.id) return;
				this.acticeIndex = item.id;
			},
		}
	}
</script>

<style lang="scss">
	.product-or-customer
	{
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		.item
		{
			padding-left: 20px;
			font-size: 14px;
			cursor: pointer;
			.actice
			{
				color: #3388FF;
			}
			.actice-solid
			{
				margin: 0 auto;
				width: 20px;
				border: 1px solid #3388FF;
			}
		}
	}
</style>
